<template>
    <div>
        <!---------------------第一行数据  统计数量------------------------>
        <el-row :gutter="20" class="mgb20">
            <el-col :span="6">
                <el-card >
                    <div class="grid-content">
                        <div class="grid-cont-center">
                            <div class="grid-num">{{consumerCount}}</div>
                            <div>用户总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card >
                    <div class="grid-content">
                        <div class="grid-cont-center">
                            <div class="grid-num">{{songCount}}</div>
                            <div>歌曲总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card >
                    <div class="grid-content">
                        <div class="grid-cont-center">
                            <div class="grid-num">{{singerCount}}</div>
                            <div>歌手数量</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card >
                    <div class="grid-content">
                        <div class="grid-cont-center">
                            <div class="grid-num">{{songListCount}}</div>
                            <div>歌单数量</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!---------------------第二行数据  用户性别、歌曲风格统计图------------------------>
        <el-row :gutter="20" class="mgb20">
            <!--用户性别比例图-->
            <el-col :span="12">
                <el-card>
                    <h3 class="mgb20">用户性别比例</h3>
                    <hr>
                    <div style="background-color: white">
                        <ve-pie :data="consumerSex" :theme="options"></ve-pie>
                    </div>
                </el-card>
            </el-col>
            <!--歌曲类型分布图-->
            <el-col :span="12">
                <el-card>
                    <h3 class="mgb20">歌曲类型分布</h3>
                    <hr>
                    <div style="background-color: white">
                        <ve-histogram :data="songStyle" :theme="options"></ve-histogram>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!---------------------第三行数据  歌手性别、歌手国籍统计图------------------------>
        <el-row :gutter="20" class="mgb20">
            <!--用户性别比例图-->
            <el-col :span="12">
                <el-card>
                    <h3 class="mgb20">歌手性别比例</h3>
                    <hr>
                    <div style="background-color: white">
                        <ve-pie :data="singerSex"></ve-pie>
                    </div>
                </el-card>
            </el-col>
            <!--歌曲类型分布图-->
            <el-col :span="12">
                <el-card>
                    <h3 class="mgb20">歌手国籍分布</h3>
                    <hr>
                    <div style="background-color: white">
                        <ve-histogram :data="country" :theme="options1"></ve-histogram>
                    </div>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    import {getAllConsumer, allSong, getAllSinger, getAllSongList} from '../api/index'
    export default {
        name: "InfoPage",
        data(){
            return{
                consumerCount: 0,   //用户总数
                songCount: 0,   //歌曲总数
                singerCount: 0, //歌手数量
                songListCount: 0,    //歌单数量
                consumer: [],    //所有用户
                consumerSex: {  //按性别分类的用户数量
                    columns: ['性别', '总数'],
                    rows: [
                        {'性别': '男', '总数': 0},
                        {'性别': '女', '总数': 0}
                    ]
                },
                options: {
                    color: ['#87cefa', '#ffc0cb']
                },
                options1: {
                    color: ['#FF8F59']
                },
                songStyle: {  //按歌单风格统计
                    columns: ['风格', '总数'],
                    rows: [
                        {'风格': '华语流行', '总数': 0},
                        {'风格': '轻音乐', '总数': 0},
                        {'风格': '欧美', '总数': 0},
                        {'风格': '粤语', '总数': 0},
                        {'风格': '日韩', '总数': 0},
                        {'风格': 'BGM', '总数': 0},
                        {'风格': '乐器', '总数': 0}
                    ]
                },
                singerSex: {  //按性别分类的歌手数量
                    columns: ['性别', '总数'],
                    rows: [
                        {'性别': '男', '总数': 0},
                        {'性别': '女', '总数': 0},
                        {'性别': '组合', '总数': 0},
                        {'性别': '不明', '总数': 0}
                    ]
                },
                country: {
                    columns: ['国籍', '总数'],
                    rows: [
                        {'国籍': '中国四川', '总数': 0},
                        {'国籍': '中国台湾', '总数': 0},
                        {'国籍': '中国上海', '总数': 0},
                        {'国籍': '中国香港', '总数': 0},
                        {'国籍': '中国安徽', '总数': 0},
                        {'国籍': '中国江苏', '总数': 0},
                        {'国籍': '中国天津', '总数': 0},
                        {'国籍': '中国黑龙江', '总数': 0},
                        {'国籍': '中国北京', '总数': 0},
                        {'国籍': '中国河南', '总数': 0},
                        {'国籍': '马来西亚', '总数': 0},
                        {'国籍': '韩国', '总数': 0},
                        {'国籍': '瑞典', '总数': 0},
                        {'国籍': '加拿大', '总数': 0},
                        {'国籍': '西班牙', '总数': 0},
                        {'国籍': '德国', '总数': 0},
                        {'国籍': '日本', '总数': 0},
                        {'国籍': '英国', '总数': 0},
                        {'国籍': '挪威', '总数': 0},
                        {'国籍': '意大利', '总数': 0},
                        {'国籍': '新加坡', '总数': 0},
                        {'国籍': '美国', '总数': 0},
                        {'国籍': '其他', '总数': 0}
                    ]
                }
            }
        },
        //页面加载时执行
        created(){

        },
        //页面加载完执行
        mounted(){
            this.getConsumer();
            this.getAllSong();
            this.getSinger();
            this.getSongList();
        },
        methods:{
            //查询所有用户数量
            getConsumer(){
                getAllConsumer().then(res => {
                    this.consumer = res;
                    this.consumerCount = res.length;
                    this.consumerSex.rows[0]['总数'] = this.setSex(1, res);
                    this.consumerSex.rows[1]['总数'] = this.setSex(0, res);
                });
            },
            //获取性别分类数
            setSex(sex, val){
                let count = 0;
                for(let item of val){
                    if(sex === item.sex){
                        count++;
                    }
                }
                return count;
            },
            //查询所有歌曲数量
            getAllSong(){
                allSong().then(res => {
                    this.songCount = res.length;
                });
            },
            //查询所有歌手数量
            getSinger(){
                getAllSinger().then(res => {
                    this.singerCount = res.length;

                    //统计性别
                    this.singerSex.rows[0]['总数'] = this.setSex(1, res);
                    this.singerSex.rows[1]['总数'] = this.setSex(0, res);
                    this.singerSex.rows[2]['总数'] = this.setSex(2, res);
                    this.singerSex.rows[3]['总数'] = this.setSex(3, res);

                    //统计国籍
                    for(let item of res){
                        this.getByCountry(item.location);
                    }
                });
            },
            //统计歌手国籍
            getByCountry(location){
                for(let item of this.country.rows){
                    if(location.includes(item['国籍'])){
                        item['总数']++;
                    }
                }
            },
            //查询所有歌单数量
            getSongList(){
                getAllSongList().then(res => {
                    this.songListCount = res.length;
                    for(let item of res){
                        this.getByStyle(item.style);
                    }
                });
            },
            //获取歌单风格数据
            getByStyle(style){
                let count = 0;
                for(let item of this.songStyle.rows){
                    if(style.includes(item['风格'])){
                        item['总数']++;
                    }
                }
                return count;
            },
        }
    }
</script>

<style scoped>
    .grid-content{
        display: flex;
        align-items: center;
        height: 50px;
    }
    .grid-cont-center{
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: darkgray;
    }

    .grid-num{
        font-size: 30px;
        font-weight: bold;
    }
</style>